<template>
  <el-drawer
    v-model="drawer"
    title="详情"
    :direction="direction"
    size="61%"
    class="drawer"
    destroy-on-close
    z-index="9999999"
  >
    <form-create
      v-model="formData"
      v-model:api="fapi"
      :rule="rule"
      :option="option"
	    @submit="onSubmit"
    />
  </el-drawer>
</template>

<script lang="ts">
import formCreate from '@form-create/element-ui'
import { ref, nextTick } from 'vue'

export default {
  name: 'TaskFillLogDetail',
  components: { formCreate: formCreate.$form() },
  setup() {
    const drawer = ref(false)
    const formLoading = ref(false)
    const formData = ref({})
    const fapi = ref(null)
    const rule = ref(null)
    const option = ref(null)
    const direction = 'rtl' // example direction

    const open = async (data: Object) => {
      formLoading.value = true
      try {
        rule.value = formCreate.parseJson(data.dfFields)
        option.value = formCreate.parseJson('{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}')
               
        await nextTick() // Ensure DOM updates
        formData.value = formCreate.parseJson(data.dffFillData)

        drawer.value = true
      } catch (error) {
        console.error('Failed to fetch form data:', error)
      } finally {
        formLoading.value = false
      }
    }

    return { 
      drawer, 
      formLoading, 
      formData, 
      fapi, 
      rule, 
      option, 
      open, 
      direction 
    }
  }
}
</script>
